<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变盒子</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background: -webkit-linear-gradient(
                0deg,
                rgb(34,114,135) 5px,
                rgb(12,4,20) 5px,
                rgba(12,4,20,0) 5px
            );-webkit-linear-gradient(
                    90deg,
                    rgb(12,4,20) 5px,
                    rgb(34,114,135) 5px,
                    rgba(34,114,135,0) 5px,
            );
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>